<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index3.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<script type="text/javascript" src="js/wow.min.js"></script>
<!--  视口等于750的宽度  要在320的可见视口中显示  -->
<meta name="viewport" content="width=750,maximum-scale=1.0,user-scalable=no">
</head>
<body>
   <header>
   	  
   	   <div class="head">
   	   	    <div class="head_logo wow rotateIn  "  data-wow-iteration="1" data-wow-duration="1s">
   	   	    	<img src="images/index3_logo.png">
   	   	    </div>
   	   	    <div class="head_nav">
   	   	    	<ul>
   	   	    		<li>LOGIN</li>
   	   	    		<li>SIGNUP</li>
   	   	    		<li>
   	   	    			  <input type="checkbox" id="check" />
                    <label for="check" class="checklink">
                       <span></span>
                       <span></span>
                       <span></span>
                    </label>
                    <div class="nav">
                        <a href="index3.html">RECIPES</a>
                        <a href="index2.html" target="_blank">Benefits</a>
                        <a href="index.html" target="_blank">Cuisines</a>
                        <a href="index4.html" target="_blank">GETSTARTED</a>

                    </div>
   	   	    		</li>
   	   	    	</ul>

   	   	    </div>


   	   	    


   	   </div>

   	   <div class="head_center">
   	   	    	 
   	   	    	 <div class="head_center_desc">
   	   	    	 	 <p class="head_head">Find your Favorite</p>
   	   	    	 	 <h2 class="head_title wow rollIn" data-wow-iteration="1" data-wow-duration="1s">RECIPES</h2>
   	   	    	 	 <a href="index.html" class="head_btn wow rotateOut" data-wow-iteration="1" data-wow-duration="1s">GET STARTED</a>
   	   	    	 	 <p class="head_title_desc">OR SEND US YOUR OWN RECIPES AND GET REWARDED!</p>
   	   	    	 </div>

   	   	</div>

   </header>
   <div class="container">
   	  
   	  <div class="con_box">
   	  	  
   	  	  <div class="con_box_text">
                 <div class="con_img " data-wow-iteration="1" data-wow-duration="1s">
                    <a href="#" class="con_head wow rotateOut" data-wow-iteration="1" data-wow-duration="1s"></a>
                    <h4>GET INSPIRED</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisc Pellentesque vel enim a elit viverra elementuma.
 Aliquam erat volutpat.</p>
                 </div>
                 <div class="con_img">
                    <a href="#" class="con_head con_head1 wow rotateOut" data-wow-iteration="1" data-wow-duration="1s"></a>
                    <h4>GET REWARDED</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisc Pellentesque vel enim a elit viverra elementuma.
 Aliquam erat volutpat.</p>
                 </div>
                 <div class="con_img">
                    <a href="#" class="con_head con_head2 wow rotateOut" data-wow-iteration="1" data-wow-duration="1s"></a>
                    <h4>GET SOCIAL</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisc Pellentesque vel enim a elit viverra elementuma.
 Aliquam erat volutpat.</p>
                 </div>

  
           </div>
   	  </div>

   </div>
<!-- container end -->
<div class="app wow bounceOut "  data-wow-iteration="1" data-wow-duration="1s">
    
   <div class="app_box">

      <div class="app_flex">
         
            <div class="iphone_bg"></div>


           <div class="app_flex_desc">
              
              <h4>INTRODUCING THE FUDI APP</h4>
              <p>Morbi eget posuere dolor. Pellentesque cursus aliquet aliquet. Aeneanet 
felis sit amet diam mollis ullamcorper. Nullam consequat sem a ante vest
ibulum tristique </p>
              <p>Vivamus ligula quam, vehicula non lacinia sed, faucibus sit amet libero. In 
libero dui,  convallis. 
Aenean tempus ligula ac odio rhoncus, quis aliquam dolor accumsan. </p>
              <p>Suspendisse aliquet felis consectetur libero  nibh id hendrerit. Donec sit amet ultrices 
ante, a mattis massa.</p>
              <div class="more">
                 <a href="#"></a>
                 <a href="#"></a>
              </div>
           </div>
      </div>

   </div>

</div>

<!-- app end -->


<div class="banner">
    <div class="banner_box">


            <input type="radio" id="btn1" name="sex" checked />
            <label for="btn1" id="demo1"></label>
            <input type="radio" id="btn2" name="sex" />
            <label for="btn2" id="demo2"></label>
            <input type="radio" id="btn3" name="sex" />
            <label for="btn3" id="demo3"></label>
            <div class="banner_boxs">
                 <div>
                    <img src="images/banner_bg.jpg">
                 </div>
                 <div>
                    <img src="images/banner_bg.jpg">
                 </div>
                 <div>
                    <img src="images/banner_bg.jpg">
                 </div>
            </div>


    </div>
</div>

<!-- banner end -->

<div class="browse">
   
     <div class="browse_title">
        <h4>BROWSE BY CUISINES</h4>
     </div>

     <div class="browse_img">
          <div>
             <img src="images/browse_img_bg.jpg">
          </div>
          <div>
             <img src="images/browse_img_bg1.jpg">
          </div>
           <div>
             <img src="images/browse_img_bg2.jpg">
          </div>
           <div>
             <img src="images/browse_img_bg3.jpg">
          </div>
           <div>
             <img src="images/browse_img_bg4.jpg">
          </div>
           <div>
             <img src="images/browse_img_bg5.jpg">
          </div>
           <div>
             <img src="images/browse_img_bg6.jpg">
          </div>
           <div>
             <img src="images/browse_img_bg7.jpg">
          </div>
           <div>
             <img src="images/browse_img_bg8.jpg">
          </div>
           <div>
             <img src="images/browse_img_bg9.jpg">
          </div>
     </div>
     


</div>

<!-- browse end -->

<div class="number">
        <div class="number_box">
             <div class="number_box_child">
                   <div>
                      <h2>23,567</h2>
                      <p>Recipes Available</p>
                   </div>
                   <div>
                       <h2>431,729</h2>
                      <p>Active Users</p>
                   </div>
                   <div>
                       <h2>892,173</h2>
                      <p>Positive Reviews</p>
                   </div>
                   <div>
                       <h2>56,581</h2>
                      <p>Photos & Videos</p>
                   </div>
                   <div>
                       <h2>56,581</h2>
                      <p>Photos & Videos</p>
                   </div>
             </div>
        </div>
     </div>

   <footer>
      
       <div class="foot_box">
           <div class="foot_box_child">
              <div>&copy;2014 Fudi. All Rights Reserved.</div>
              <div>DESIGN BY:<span> WWW.BEKADES.COM</span></div>
           </div>
       </div>
   </footer>
</body>
</html>

<script>
     
     new WOW().init();
</script>